<template>
  <div style="background-color: #f3f6f9; height: 100vh">
    <van-nav-bar
      title="新增对账记录"
      left-arrow
      @click-left="onClickLeft"/>
    <div id="jobInfo" style="margin-top: 10px">
      <van-form validate-first @failed="onFailed">
        <van-field
          v-model="amt"
          label="调整后余额"
          placeholder="请输入调整后余额"
          input-align="right"/>
        <van-field
          v-model="linkman"
          label="联系人"
          placeholder="请输入联系人"
          input-align="right"/>
        <van-field
          v-model="tel" label="联系电话" placeholder="请输入联系电话"
          name="telnum" :rules="[{ pattern, message: '请输入正确的电话号码'}]"
          input-align="right" />
        <div style="height: 10PX"></div>
        <van-field
          v-model="remark"
          label="备注"
          placeholder="请输入备注"
          input-align="right"/>
      </van-form>
    </div>
    <div id="btn_op" class="btn_sub">
      <van-button @click="onClickAccept" color="linear-gradient(to right, #20B1F2, #1393D3)">提交
      </van-button>
    </div>
  </div>
</template>

<script>
import {
  Field,
  Form
} from 'vant';

export default {
  components: {
    [Field.name]: Field,
    [Form.name]: Form,
  },
  data() {
    return {
      amt: '',
      linkman: '',
      tel: '',
      remark: '',
      pattern: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}/,
      telnum: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}/,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickAccept() {
      this.$router.push('AccountList');
    },
  },
  created() {
    console.log(this.$route.params);
  },
};
</script>

<style scoped>
  .btn_sub{
    text-align: center;
    margin-top: 50PX;
    width: 100%;
  }
  .btn_sub button{
    width: 90%;
  }
</style>
